<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script src="../../js/jquery-3.5.1.js"></script>
</head>
<body>
<div class="bbs">
    <header><span id="openPost">我要发帖</span></header>
    <section>
        <ul id="postList">
        </ul>
    </section>
    <div class="post" id="post">
        <input class="title" id="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select id="bankuai">
        <option>请选择版块</option>
        <option>电子书籍</option>
        <option>新课来了</option>
        <option>新手报到</option>
        <option>职业规划</option>
    </select>
        <textarea class="content" id="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
<script type="text/javascript">
    let imgs = ["tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg"];

    $(function () {
        $("#openPost").click(function () {
            $("#post").toggle()
        })
        $(".btn").click(function () {
            //1.获取input的值
            let title = $("#title").val();
            let bankuai = $("#bankuai").val();
            let content = $("#content").val();
            //时间
            let date = new Date();
            let strDate = date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate()+" " +date.getHours()+":"+date.getMinutes();

            let n = Math.ceil(Math.random()*4)-1; //0-3 随机下标
            //2.创建节点
            let str = '<li><div><img src="images/'+imgs[n]+'"></div>\n' +
                '                <h1>'+title+'</h1>\n' +
                '                <p><span>版块：'+bankuai+'</span><span>发表时间：'+strDate+'</span></p></li>';
            $("#postList").prepend(str);
            $("#post").toggle()
            $("#title").val("");
            $("#content").val("");
            $("#bankuai").val("请选择版块");
        })
    })


</script>
</body>
</html>